<template>
  <div class="coupon">
    <p>优惠券</p>
    <div v-for="item in $store.state.HandPick.handData.couponList" :key="item.id">
      <span>￥</span>
      <span>{{ item.discount }} 元</span>
      <span>{{ item.name }}</span>
      <p>{{ item.desc }}-{{ item.tag }}有限期: {{ item.days }}天</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Coupon',
  components: {

  },
  data () {
    return {
      price: 5,
      days: 10
    }
  },
  watch: {

  },
  mounted () {

  },
  methods: {

  }
}

</script>
<style scoped lang='scss'>
.coupon {
  background-color: #fff;
  margin-top: 20px;
  font-size: 16px;
  padding: 15px;

  div {
    padding: 20px 10px;
    border: 1px solid red;
    margin-top: 10px;
    color: red;
    text-align: left;

    span:nth-child(1) {
      font-size: 0.5em;
    }

    span:nth-child(2) {
      // width: 30px;
      width: 70px;
      display: inline-block;
      font-size: 1.5em;
    }

    span:nth-child(3) {
      margin-left: 40px;
      color: black
    }

    p {
      color: rgb(150, 151, 153);
    }
  }
}
</style>
